<template>
  <view class="rules-container">
  <view class="header">
    <view class="title">玩法说明</view>
  </view>

    <scroll-view class="content" scroll-y>
      <view class="section">
        <view class="section-title">基本玩法</view>
        <view class="section-content">
          1. 每个玩家控制一个弹珠，通过拖动弹珠撞击其他弹珠<br>
          2. 将其他弹珠打入终点洞穴即可赢得该弹珠<br>
          3. 被赢走的弹珠会永久属于获胜玩家<br>
          4. 弹珠输完后可以从好友处获取新弹珠
        </view>
      </view>

      <view class="section">
        <view class="section-title">操作方式</view>
        <view class="section-content">
          1. 长按并拖动弹珠进行瞄准<br>
          2. 松开手指发射弹珠<br>
          3. 拖动距离决定弹射力度<br>
          4. 拖动方向决定弹射角度
        </view>
      </view>

      <view class="section">
        <view class="section-title">得分规则</view>
        <view class="section-content">
          1. 赢得弹珠可获得积分<br>
          2. 最后一击的距离和速度影响积分奖励<br>
          3. 积分可兑换新弹珠和皮肤<br>
          4. 特殊成就可获得额外奖励
        </view>
      </view>

      <view class="section">
        <view class="section-title">地形效果</view>
        <view class="section-content">
          1. 雪地：弹珠滑动距离增加<br>
          2. 草原：正常地形<br>
          3. 沙漠：弹珠滚动速度减慢<br>
          4. 湿地：弹珠容易偏离方向<br>
          5. 城镇：有更多障碍物
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {}
</script>

<style>
.rules-container {
  padding: 30rpx;
  height: 100vh;
  background: #e0e5ec;
}

.header {
  margin-bottom: 40rpx;
  text-align: center;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #4a5568;
}

.content {
  height: calc(100vh - 180rpx);
}

.section {
  margin-bottom: 40rpx;
  background: #e0e5ec;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #4a5568;
  margin-bottom: 20rpx;
}

.section-content {
  font-size: 28rpx;
  color: #4a5568;
  line-height: 1.8;
}
</style>
